
import React, { Component } from 'react';
import { List } from 'antd-mobile';
const Item = List.Item;

// 设备信息主页Item
class DeviceStoryItem extends Component {

    constructor(props, context) {
        super(props, context);
        this.handleItemClick = this.handleItemClick.bind(this);
    }

    handleItemClick() {
        this.props.itemClick({ value: this.props.index });
    }

    render() {
        return (
            <Item
                arrow="horizontal"
                extra={<p style={{ fontSize: '13px' }}>{(this.props.item.count || 0) + "首"}</p>}
                onClick={this.handleItemClick}>
                <div style={styles.content}>
                    <div style={styles.image}>
                        <img src={this.props.item.url} style={{
                            width: '30px',
                            height: '30px',
                            borderRadius: '3px'}} alt='' />
                    </div>
                    <div style={{paddingLeft: "16px",}}>
                        <p style={styles.name}>{this.props.item.title}</p>
                    </div>
                </div>
            </Item>
        );
    }
}

export default DeviceStoryItem;

const styles = {
    content: {
        width: '100%',
        height: "46px",
        display: 'flex'
    },
    image: {
        height: "46px",
        width: '46px',
        alignItems: "center",
        justifyContent: 'center',
        display: 'flex'
    },

    name: {
        color: "#000",
        fontSize: '14px'
    },
    count: {
        width: "50%",
        color: "#888",
        fontSize: '12px',
        display: "flex",
        marginTop: '3px'
    },
}